<template>
	<!-- 委外订单 -->
	<div style="height:3000px">
		<v-card>
			<v-card-title>
				<v-divider class="mx-4" inset vertical></v-divider>
				<v-row class="mt-2">
					<v-divider style="height: 50px;" class="mx-4" inset vertical></v-divider>
					<v-col cols="12" md="1">
						<v-text-field label="单据编号" v-model="query.code" dense outlined>
						</v-text-field>
					</v-col>
					<v-col cols="12" md="1">
						<v-text-field label="项目号" v-model="query.projectcode" dense outlined>
						</v-text-field>
					</v-col>
					<v-col cols="12" md="1">
						<v-text-field label="项目名称" v-model="query.projectname" dense outlined>
						</v-text-field>
					</v-col>
					<v-col cols="12" md="1">
						<v-text-field label="设备名称" v-model="query.equiname" dense outlined>
						</v-text-field>
					</v-col>
					<v-col cols="12" md="1">
						<v-select label="订单状态" v-model="query.status" :items="woutOrderStatusItems" dense outlined>
						</v-select>
					</v-col>
					<!-- ml-n16 前面加n是间距 -->
					<!-- class="ml-n16 mx-auto" -->
					<v-col cols="12" md="2">
						<v-btn depressed color="primary" @click="loadPages">查询</v-btn>
						<v-btn class="ml-3" depressed color="primary" @click="refreshLoadPages">
							重置</v-btn>
					</v-col>
				</v-row>
			</v-card-title>
			<v-card-text>
				<v-data-table :headers="woutOrderHeaderList" :items="woutOrderDataList" small fixed-header item-key="id"
					dense show-select class="text-no-wrap" loading-text="正在加载请稍等......" :loading="woutOrderLoading"
					:options.sync="woutOrderOptions" show-expand single-expand :footer-props="vuetifyDefaultPage"
					:server-items-length="woutOrderTotalCount">
					<!-- 	<template v-slot:item.actions="{ item }">
						<div>
							<v-btn class="ml-1" small tile color="primary"
								@click="editPurchaseDialog=true,woutOrderModel=item">
								编辑
							</v-btn>
						</div>
					</template> -->
					<template v-slot:expanded-item="{ headers, item }">
						<td :colspan="headers.length">
							<v-data-table :headers="woutOrderDetailHeaderList" :items="item.detailList" small
								fixed-header item-key="id" dense show-select class="text-no-wrap"
								loading-text="正在加载请稍等......"></v-data-table>
						</td>
					</template>
				</v-data-table>
			</v-card-text>
		</v-card>
	</div>

</template>

<script>
	import {
		mapActions
	} from 'vuex'
	export default {
		name: 'order_production',
		components: {},
		data: () => ({
			query: {
				code: '',
				projectcode: '',
				projectname: '',
				equiname: '',
				status: 1
			},
			parmaterEnum: ['OrderWoutStatus'],
			woutOrderStatusItems: [],
			woutOrderHeaderList: [],
			woutOrderDetailHeaderList: [],
			woutOrderDataList: [],
			woutOrderTotalCount: 0,
			woutOrderLoading: true,
			woutOrderOptions: { //页数
				page: 1,
				//每页行数
				itemsPerPage: 10
			},
			vuetifyDefaultPage: {
				'items-per-page-text': '每页个数',
				'items-per-page-options': [10, 20, 50, 100, 200]
				// 'items-per-page-all-text': '100'
			},

		}),
		watch: {
			woutOrderOptions: {
				handler() {
					this.loadPages()
				},
				deep: true
			},

		},
		created() {
			this.loadwoutOrderHeaderList()
			this.loadEnums()
		},
		methods: {
			...mapActions('mes/common', [
				//获取物料信息
				'LoadType'
			]),
			async loadEnums() {
				var items = await this.LoadType({
					pramterEnums: this.parmaterEnum
				})
				this.woutOrderStatusItems = items
			},
			refreshLoadPages() {
				this.query.code = ''
				this.query.projectcode = ''
				this.query.projectname = ''
				this.query.equiname = ''
				this.query.status = ''
			},
			//加载加工件
			async loadPages() {
				this.woutOrderLoading = true
				var response = await this.$httpRequest({
					url: `MES/MESProductionWoutOrder/LoadPage?code=${this.query.code}&projectcode=${this.query.projectcode}&projectname=${this.query.projectname}&equiname=${this.query.equiname}&status=${this.query.status}&pageNumber=${this.woutOrderOptions.page}&pageSize=${this.woutOrderOptions.itemsPerPage}`,
					method: 'get',
				})
				if (response.status == 1) {
					this.woutOrderDataList = response.data.result
					this.woutOrderTotalCount = response.data.pagination.totalRecords
					this.woutOrderLoading = false
				} else {
					this.$message.error(response.info)
				}
			},

			//加工件头信息
			loadwoutOrderHeaderList() {
				this.woutOrderHeaderList = [
					// {
					// 	text: '操作',
					// 	value: 'actions',
					// 	align: 'center',
					// 	filterable: true,
					// }, 
					{
						text: '单据编号',
						value: 'code',
						align: 'center',
						filterable: true,
					},
					{
						text: '单据日期',
						value: 'ordertime',
						align: 'center',
						filterable: true,
					},
					{
						text: '供应商编码',
						value: 'suppliercode',
						align: 'center',
						filterable: true,
					},
					{
						text: '部门编码',
						value: 'departmentcode',
						align: 'center',
						filterable: true,
					},
					{
						text: '业务员编码',
						value: 'personcode',
						align: 'center',
						filterable: true,
					},
					{
						text: '税率',
						value: 'taxrate',
						align: 'center',
						filterable: true,
					}, 
					{
						text: '币种',
						value: 'currency',
						align: 'center',
						filterable: true,
					},
					{
						text: '汇率',
						value: 'exchange',
						align: 'center',
						filterable: true,
					},

					{
						text: '状态',
						value: 'statusname',
						align: 'center',
						filterable: true,
					}
				]

				this.woutOrderDetailHeaderList = [
					// {
					// 	text: '操作',
					// 	value: 'actions',
					// 	align: 'center',
					// 	filterable: true,
					// },
					{
						text: '存货编号',
						value: 'invcode',
						align: 'center',
						filterable: true,
					},
					{
						text: '数量',
						value: 'quantity',
						align: 'center',
						filterable: true,
					}, {
						text: '原币单价',
						value: 'unitprice',
						align: 'center',
						filterable: true,
					}, {
						text: '税率',
						value: 'taxrate',
						align: 'center',
						filterable: true,
					},
					{
						text: '计划下达日期',
						value: 'scheduleddate',
						align: 'center',
						filterable: true,
					},
					{
						text: '计划到货日期',
						value: 'planneddate',
						align: 'center',
						filterable: true,
					},
					{
						text: '项目号',
						value: 'projectcode',
						align: 'center',
						filterable: true,
					},
					{
						text: '项目名称',
						value: 'projectname',
						align: 'center',
						filterable: true,
					},
					{
						text: '设备名称',
						value: 'equiname',
						align: 'center',
						filterable: true,
					},
					{
						text: '部件名称',
						value: 'partname',
						align: 'center',
						filterable: true,
					},
				]
			},

		}

	}
</script>

<style>
</style>
